<template>
  <div class="bgbg" v-if="listshow">
    <div class="videolist">
      <div class="title">摄像头信息展示</div>
      <div class="closevideo" @click="closevideo"></div>
      <div class="videolistleft">
        <div class="listtop">
          <img src="@/assets/image/shexiangtou.png" alt="" class="sxt" />
          <span>摄像头列表</span>
        </div>

        <el-collapse accordion>
          <el-collapse-item
            v-for="(item, index) in data.videolist"
            :title="item.installationLocationName"
            :name="index + 1"
            @click="changechildren(item, index)"
          >
            <div v-for="(el, num) in item.children">{{ el.vnm }}</div>
          </el-collapse-item>
        </el-collapse>
      </div>
      <div class="videolistright">
        <div
          v-for="(item, index) in data.listplay"
          :key="index"
          class="itemvideo"
        >
          <div class="vtitle">{{ item.vnm }}</div>
          <div class="playdiv">
            <!-- <video-player
              ref="videoPlayer22"
              style="width: 100%; height: 100%"
              :src="changeshi(item.hdUrl)"
              :options="data.playerOptions"
              @play="onPlayerPlay(item, index)"
              :volume="0.6"
            /> -->
            <!-- <Videoplay ref="video" @click="change(item, index)" /> -->
            <Liveplayer ref="video" @click="change(item, index)" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import Liveplayer from "./liveplayer.vue";
import Videoplay from "./videoplay.vue";
import { getshexiangtoudata } from "../../api/index";
import {
  ref,
  reactive,
  onMounted,
  defineExpose,
  getCurrentInstance,
} from "vue";
import CryptoJS from "crypto-js";
//视频封面
const videoPlayer22 = ref(null);
const video = ref(null);
let videoshow = ref(true);
let listshow = ref(false);
let data = reactive({
  videolist: [],
  playerOptions: {
    // height: 252,
    // width: 512, //播放器宽度
    playbackRates: [0.7, 1.0, 1.5, 2.0], // 播放速度
    autoplay: false, // 如果true,浏览器准备好时开始回放。
    muted: true, // 默认情况下将会消除任何音频。
    loop: true, // 导致视频一结束就重新开始。
    preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
    language: "zh-CN",
    // aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
    fluid: false, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
    notSupportedMessage: false, // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
    controls: true,
    controlBar: {
      timeDivider: true,
      durationDisplay: true,
      remainingTimeDisplay: true,
      fullscreenToggle: true, // 全屏按钮
    },
  },
  listplay: [],
  listplay2: [],
});

onMounted(() => {
  getshexiangtoudata({}).then((res) => {
    // console.log(res.data);
    // let a = res.data.map((item, index) => item.installationLocationName);
    data.videolist = res.data.reduce((acc, current) => {
      if (
        !acc.some(
          (item) =>
            item["installationLocationName"] ===
            current["installationLocationName"]
        )
      ) {
        // console.log(current.installationLocationName);
        acc.push(current);
      }
      return acc;
    }, []);
    data.videolist.forEach((item, index) => {
      item.children = [];
      res.data.forEach((el, num) => {
        if (item.installationLocationName == el.installationLocationName) {
          item.children.push(el);
        }
      });
    });
    data.listplay = data.videolist[0].children;
    // console.log(data.videolist)
  });
});

const closevideo = () => {
  listshow.value = false;
};
const open = () => {
  listshow.value = true;
};
const changechildren = (item, index) => {
  // console.log(item)
  // videoshow.value = false
  // videoshow.value = true
  data.listplay = item.children;
  data.listplay2 = item.children;

  video.value.forEach((el, num) => {
    el.play("");
  });
};
const changeshi = (url) => {
  if (url) {
    const KEY = "_____sisowi_____";
    const encryptedData = url;
    // 示例数据，请替换为实际接收的数据
    // CryptoJS要求密钥为WordArray格式，因此需要转换
    const keyWordArray = CryptoJS.enc.Utf8.parse(KEY);
    // 解密
    const decryptedData = CryptoJS.AES.decrypt(encryptedData, keyWordArray, {
      mode: CryptoJS.mode.ECB,
      padding: CryptoJS.pad.Pkcs7,
    }); // 注意：CryptoJS使用Pkcs7Padding而非PKCS5Padding，但它们在128位块加密中等效
    // 将解密后的WordArray转换为UTF8字符串
    const plainText = CryptoJS.enc.Utf8.stringify(decryptedData);
    // console.log("解密后的数据:", plainText);
    //   videoSrc.value = plainText;
    return plainText;
  } else {
    return "";
  }
};

function onPlayerPlay(item, index) {
  // console.log(player, val);
  // let videoPlayer = document.getElementById("videoPlayer");
  // console.log(videoPlayer);
  // let videoPlayer = videoPlayer22.value
  // data.listplay.forEach((el, num) => {
  //   if (index !== num) {
  //     el.hdUrl = ''
  //   } else {
  //     item.hdUrl = data.listplay2[index].hdUrl
  //   }
  // })
  // videoshow.value = false
  // videoshow.value = true
  // console.log(videoPlayer[0])
}

const change = (item, index) => {
  // console.log(item, index)
  let url = changeshi(item.hdUrl);
  video.value.forEach((el, num) => {
    if (index !== num) {
      el.play("");
    } else {
      el.play(url);
    }
  });
};
defineExpose({
  open,
});
</script>

<style lang="scss" scoped>
.videolist {
  position: absolute;
  bottom: 21px;
  left: 50%;
  transform: translateX(-50%);
  width: 1881px;
  height: 949px;
  background: url("@/assets/image/videobackground.png") no-repeat;
  background-size: cover;
  z-index: 999999;

  .title {
    position: absolute;
    left: 24px;
    top: 0px;
    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: bold;
    font-size: 14px;
    color: #ffffff;
    line-height: 25px;
  }
  .closevideo {
    width: 15px;
    height: 15px;
    // border: 1px solid red;
    position: absolute;
    top: 5px;
    right: 6px;
    cursor: pointer;
  }
  .listtop {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 14px 0px 0px 19px;
    box-sizing: border-box;

    font-family: Source Han Sans CN, Source Han Sans CN;
    font-weight: 400;
    font-size: 16px;
    color: #ffffff;

    .sxt {
      width: 20px;
      height: 20px;
    }
  }
  .videolistleft {
    position: absolute;
    left: 11px;
    bottom: 25px;
    width: 292px;
    height: 882px;
    background: #071f2a;
    border-radius: 4px 4px 4px 4px;
  }
  .videolistright {
    position: absolute;
    right: 11px;
    bottom: 25px;
    width: 1554px;
    height: 883px;
    // border: 1px solid red;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 12px 9px;
    // align-items: flex-start;
    // &::after {
    //   content: "";
    //   flex-grow: 30;
    // }

    .itemvideo {
      //   flex: 0.3;
      width: 512px;
      height: 287px;
      background: #071f2a;
      border-radius: 4px 4px 4px 4px;
      //   border: 1px solid red;
      .vtitle {
        width: 512px;
        height: 35px;
        padding-left: 14px;
        padding-top: 4px;
        box-sizing: border-box;
        background: linear-gradient(
          180deg,
          rgba(77, 192, 255, 0) 0%,
          #21576d 51%,
          rgba(39, 96, 128, 0) 100%
        );
        border-radius: 0px 0px 0px 0px;

        font-family: Source Han Sans CN, Source Han Sans CN;
        font-weight: 400;
        font-size: 14px;
        color: #ffffff;
        //   line-height: 25px;
      }
      .playdiv {
        width: 512px;
        height: 252px;
      }
    }
  }
}

v-deep {
  .el-collapse {
    color: #ffffff;
  }
  .el-collapse-item__header {
    color: #ffffff !important;
    font-family: Source Han Sans CN, Source Han Sans CN !important;
    font-weight: 400 !important;
    font-size: 14px !important;
  }
  //   .el-collapse-item__header {
  //     border-bottom: 0px !important;
  //   }
  //   .el-collapse-item {
  //     padding-left: 51px !important;
  //     box-sizing: border-box !important ;
  //   }
}
</style>
